import React from 'react';
import {extendTheme, NativeBaseProvider, Button, Image} from 'native-base';
import {createStackNavigator} from '@react-navigation/stack';
import {NavigationContainer, useNavigation} from '@react-navigation/native';
import {navigationRef} from './Utils';
import {customTheme, screenHeaderOptions} from '../Theme';
import {MainRoutes, SplashRoutes} from './Routes';
import {
  StatusBar,
  BackHandler,
  TouchableOpacity,
  DeviceEventEmitter,
  View,
  Text,
} from 'react-native';
// import {UserSettingScreen} from '../Screen/User';
// import { CourseResultScreen } from '../Screen/Course';

const RootStack = createStackNavigator();

const ApplicationNavigator = () => {
  const theme = extendTheme(customTheme);

  const handleNavigationChange = ({key, index, routeNames, routes, type}) => {
    console.log(routes, index);
    // BackHandler.addEventListener('hardwareBackPress', function () {
    //   if (routes[index].name === 'Login') {
    //     console.log(routes[index].name);
    //     console.log('退出去了');
    //     BackHandler.exitApp();
    //   }
    // });
  };

  return (
    <NativeBaseProvider
      theme={theme}
      config={{suppressColorAccessibilityWarning: false}}>
      {/* <StatusBar
        barStyle="light-content"
        backgroundColor="rgba(247, 247, 247, 1)"
        translucent={true}
      /> */}
      <NavigationContainer
        onStateChange={obj => {
          handleNavigationChange(obj);
        }}
        ref={navigationRef}>
        <RootStack.Navigator screenOptions={screenHeaderOptions}>
          {MainRoutes.map(route => (
            <RootStack.Screen
              {...route}
              key={route.name}
              options={{
                headerStyle: {
                  backgroundColor: route.color ? route.color : '#ffffff',
                  shadowColor: 'transparent',
                },
                headerTitleStyle: {
                  color: route.txtcolor ? route.txtcolor : '#333333',
                  fontSize: 18,
                },
                title: route.title,
                headerShown: route.headerShown,
                headerLeft: () => {
                  return (
                    <TouchableOpacity
                      onPress={() => {
                        // navigationRef.current.goBack();
                      }}>
                      <Image
                        source={require('../assets/home/back.png')}
                        style={{
                          width: 11,
                          height: 18,
                          marginLeft: 15,
                          marginTop: 8,
                        }}
                      />
                    </TouchableOpacity>
                  );
                },
              }}
            />
          ))}
          {SplashRoutes.map(route => (
            <RootStack.Screenr {...route} key={route.name} />
          ))}
        </RootStack.Navigator>
      </NavigationContainer>
    </NativeBaseProvider>
  );
};


export default ApplicationNavigator;
